<!-- type_23图表-根据选择选择数据渲染 -->
<template>
  <div class="type23_chart_warp">
    <div :id="chart_id" style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
// 图表插件
import * as echarts from "echarts";
//随机数
import { getRandomCode } from "@/utils/utiltoo";
export default {
  // chart_data已转好的数据
  props: ["chart_data"],
  data() {
    return {
      chart_id: "",
      chart: "",
    };
  },
  created() {
    // 不重复id
    this.chart_id = getRandomCode(29);
  },
  components: {},

  computed: {},

  mounted() {
    this.$nextTick(() => {
      this.init_echarts();
    });
  },

  methods: {
    // 图表实例
    init_echarts() {
      this.chart = echarts.init(document.getElementById(this.chart_id));
      this.echarts_setoption();
    },
    //绘图---重新绘图调用
    echarts_setoption() {
      this.chart.setOption(this.chart_data);
    },

  },

  beforeDestroy() {
    if (!this.chart) {
      return;
    }
    this.chart.dispose();
    this.chart = null;
  },
  watch: {
    chart_data: {
      deep: true,
      handler(val) {
        if (this.chart) {
          // 数据变化重新绘图
          this.chart.setOption(val, true);
        }
      },
    },
  },
};
</script>
<style lang='scss' scoped>
.type23_chart_warp {
  width: 800px;
  height: 500px;
}
</style>